<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo menu-center"
      
    >
      <el-menu-item index="5" class="one">
        <img src="https://flowbite.com/docs/images/logo.svg" alt="分类" class="menu-icon" />
        <h2 class="two">氢氦锂铍硼</h2>
      </el-menu-item>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        
      >
        <el-menu-item index="/" >
        <router-link to="/">首页</router-link>
        </el-menu-item>
        <el-menu-item index="/one">
            <router-link to="/one">分类</router-link>
        </el-menu-item>
        <el-menu-item index="/one"><a href="/one" >订单管理</a></el-menu-item>
        <el-menu-item index="4">归档</el-menu-item>
      </el-menu>

      <div class="input">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          size="small"
          
          
        >
        </el-input>
        <el-button size="small">登录</el-button>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods:{
    fun(){
      this.$router.push('/one');
    },
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
  }
};
</script>

<style scoped >
.menu-icon {
  width: 40px; 
  height: 40px; 
  object-fit: contain;
  
}
.menu-center {
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%; /* 确保菜单占满容器宽度 */

}

.el-menu-demo {
  display: flex;
}
.input{
 display: flex;
 justify-content: space-between;
  align-items: center;
}
.one{
  display: flex;
  justify-content: space-around;
  align-items: center;
 
 
}
.two{
  margin-left: 20px;
  color: #000;
}
</style>